\documentclass{report}
\usepackage[utf8]{inputenc}
\usepackage[francais]{babel}
\usepackage[T1]{fontenc}
%\usepackage[cyr]{aeguill}
\usepackage{lmodern}
\usepackage{ifpdf}
%\usepackage{graphicx}
\usepackage[pdftex]{graphicx}
\usepackage{natbib}
\usepackage[pdftex,colorlinks=true,linkcolor=blue,citecolor=blue,urlcolor=blue]{hyperref}
\usepackage{listings}
\usepackage{verbatim}

\renewcommand{\familydefault}{\sfdefault}

\makeatletter
\renewcommand{\thesection}{%
  \ifnum\c@chapter<1 \@arabic\c@section
  \else \thechapter.\@arabic\c@section
  \fi
}
\makeatother

\marginparwidth 0pt
\oddsidemargin  0pt
\evensidemargin  0pt
\marginparsep 0pt
\topmargin   0pt

\textwidth   6.5in
\textheight  8.5 in

\title{Rapport du projet WASP : Réalisation d'une Application Web Securisée}
\author{El Mehdi AREGABI \and  Julien MICHEL \and Lokman RAHAMANI }
\date{\today}
\ifpdf
	\pdfinfo 
	{
		/Author ( AREGABI - MICHEL - RAHAMANI )
		/Title (Rapport du projet WASP)
		/Subject (Web Application Security)
		/Keywords ()
		/CreationDate (\today)
	}
\fi

\begin{document}
	% Page de titre
	\maketitle
	\thispagestyle{empty}
	\newpage
	
	% Page vide
	
	\thispagestyle{empty}
	\newpage
	
	% Sommaire
	\tableofcontents
	
	\newpage
	
	%\setcounter{chapter}{+1}
	
	\section{Description de l'application web : Prévoir Mon Voyage}
	L'application web Prévoir Mon Voyage offre un service d'iténéraire pour les voyages. En plus l'application offre aux utilisateurs des services proposés par des fournisseurs 
	toute au long de leurs iténéraire. Les services actuels sont la restauration, l'hôtelerie et l'allocation de voiture. Pour proposer un service le fournisseur doit 
	s'identifier en utilisant son compte enregistré.\\ 
	
	Un fournisseur à la première utilisation crée un compte fournisseur, aprés il peut utiliser son compte pour proposer des services qui seront
	proposés aux clients.\\
	
	Un client à la page d'acceuil saisie son point de départ et sa destination, et l'iténéraire s'affiche sur une \emph{GoogleMap} ainsi que les services
	proches proposés. Le client choisit les services qu'il s'intéresse. Le prix total de tout les services séléctionnés est affiché et mis à jour à chaque
	nouvelle séléction. Une fois que le client termine sa séléction, il valide son choix et passe au paiement. Si le paiment est accepté un code de 
	réservation est retourné au client pour accéder au services payés pendant son voyage.\\
	
	Les clients peuvent envoyer des retours de leurs voyages en laissant des commentaires sur les services utilisés ou en téléchargeant des images
	de leurs voyages organisés à l'aide du site pour que d'autres clients peuvent consultées.\\
	
		 
	\newpage
	\section{Server}
	Cette partie traite le côté Serveur de l'application.
		\subsection{Services}
		Le serveur fournit des services à deux profiles d'utilisateurs : les clients et les fourniseurs.
		Pour un fournisseur les services disponibles sont :\\
		\begin{itemize}
		 \item Création d'un compte : chaque fournisseur doit créer un compte pour pouvoir fournir des services aux clients,
		 \item Ajout de services : une fois qu'un fournisseur soit connecté a son compte il peut proposer différents types de services aux clients\\
		\end{itemize}
		Pour un client les services sont :\\
		\begin{itemize}
		 \item Calcul d'iténéraire : le client saisie le point de départ et le point d'arrivée,
		 \item Séléction des services : les services disponibles s'affichent dans une liste et sur la map.
		 \item Résevation et Paiement en ligne : le client séléctionne les services en cliquant sur le boutton 'Book', ou en cliquant sur le marqueur 
		 sur la map.Pour clotûrer la liste des choix, le client clique sur le boutton 'Validate', et procéde au paiment aprés en cliquant sur 'Payment'
		 \item Poster un commentaire texte ou image: le client tape un texte dans un champs HTML, ou bien il peut \emph{uploader} une image de son voyage.
		\end{itemize}


		\subsection{Security}
		Pour assurer la securité on a prévu pour les attaques les plus connus des mécanismes de protection.
		
		\subsubsection{XSRF Prevention}
		Pour se protéger contre l'attaque XSRF on gére les sessions toujours avec des 'tokens' qui sont des variables aléatoires généré pour 
		chaque session, par exemple dans le fichier \verb-logon_provider.php-  on génère un token pour la session courante:
		\begin{verbatim}
		 session_start();
		 $token = hash("sha512", mt_rand(0, mt_getrandmax()));
		\end{verbatim}
		
		Et aprés dans la page \verb-logon_provider_db.php- on vérife que le token existe dans cette session et qu'il est bien le même :
		\begin{verbatim}
		 session_start();
		 $referer = 'https://localhost/planmytrip/logon_provider.php'; 
		 // la page d'où l'on doit venir normalement
		 if ( isset($_SESSION['token']) && isset($_POST['token']) ) {
		    if ($_SESSION['token'] == $_POST['token']) {
		      if ($_SERVER['HTTP_REFERER'] == $referer) {
		\end{verbatim}
		Aussi on vérifie que l'origine de la requête est bien une page de notre application web et pas une autre.\\
		Pour que ce mécanisme soit sûre, et pour prévenir le cas d'une attaque de l'homme au millieu MITM et qu'une autre personne récupère
		le token, on doit crypter les données
		en utilisant SSL.\\Par contre, on peut pas créer les cookies en \verb-HttpOnly- puisque dans notre code JavaScript on a besion des cookies.
		
		\subsubsection{CodeInjection (XSS) prevention}
		Pour ce protéger de l'injection du code JavaScript, avant d'afficher n'importe quelle donnée stockée on la traite en premier 
		par la fonction \verb-htmlentities- pour échaper tout code existant.
		Par exemple dans le fichier \verb-plan_trip.php- à la ligne \verb-38- on utilise la fonction \verb-htmlentities- avant d'afficher au client actuel
		les commentaires saisies au préalable par d'autre clients.  \\
		
		\subsubsection{SQLInjection prevention}
		De la même façon que l'injection de code, on utilise \verb-mysql_real_escape_string- pour échapper les caractéres 
		sensibles avant l'éxécution de chaque requête SQL qui est créée d'aprés les données entrées par les utilisateurs (car la règle d'or est de ne 
		jamais faire confiance à ce que les clients envoient au serveur).\\
		Par exemple dans le fichier \verb-leave_comment_servlet.php- à la ligne \verb-4- on utilise la fonction \verb-mysql_real_escape_string- et ainsi
		on peut éxécuter la requête SQL qui vient aprés sans risque d'injection.
		
		\subsubsection{Secure Payment using PayPal}
		Pour faire un vrai paiement sécurisé on peut utiliser PayPal. PayPal offre une API aux développeurs pour pouvoir intégerer un bouton pour le paiement
		en utilisant PayPal. On peut créer des comptes virtuels (qui sont des vrais comptes mais qui contient de \emph{l'argent Jouet}) pour tester
		l'application web avant le déployement. Il y a deux types principaux de comptes: \emph{seller} pour un vendeur, et \emph{buyer} pour un client.
		En utilisant le compte seller, on peut créer des boutons \emph{Buy} en insérant le code php généré par PayPal dans la page web.
		Pour que PayPal puisse notifier le résultat d'un paiement à un vendeur il faut qu'il configure un IPN (Instant Payment Notification) qui est une URL 
		d'un fichier spéciale (souvent nommé \verb-ipn.php-) stocké localement et qui va traiter les requêtes POST que Paypal va envoyer pour l'informer du résultat d'un payement.
		
		\subsubsection{LFI/RFI prevention}
		Pour se protéger contre LFI/RFI on n'inclue jamais des fichiers php dont le nom dépend d'une donnée saisie par l'utilisateur. Pour plus de 
		garantie on a aussi modifié la configuration de php dans le fichier \verb-php.ini- en mettant \verb-allow_url_include = Off-, ou dans la configuration
		d'Apache dans le fichier \verb-httpd.conf- en mettant \verb-php_flag  allow_url_include  off- pour interdir l'inclusion des fichiers php distants.
		Pour notre projet, dans le fichier de configuration 'php.ini':
		\begin{verbatim}
		 ; Whether to allow include/require to open URLs (like http:// or ftp://) as files.
		 ; http://php.net/allow-url-include
		 allow_url_include = Off
		\end{verbatim}
		
		\subsubsection{Authenticity and Integrity}
		Pour assuer l'authenticité (être sûr avec qui on communique) et l'intégrité (être sûr que les données n'ont pas été modifiées) on a utilisé le 
		protocole SSL pour transferer les données confidentielles et pour les opérations d'authentifications.
		Par exemple pour le paiement, on force l'utilisation de \verb-https- en vérifiant à la page \verb-bank_servlet.php- que requête POST vient de 
		la bonne page qui doit être \verb-https://localhost/planmytrip/bank.php- mais aussi en utilisant le bon protocole. Un utilisateur ne peut
		pas accéder directement à la page (en protocole http par exemple) puisqu'on utilise un token, qui sera donné si l'utilisateur passe avant 
		par la page lors du passage de la page \verb-bank.php-.
		Sinon on peut aussi utiliser la fonction php \verb- fsockopen("ssl://www",,) -.\\
		Pour mettre en oeuvre HTTPS du côté serveur, on doit configurer Apache en incluant un certificat du serveur(auto-délivré pour ne pas payer pour un projet académique) au 
		format .crt pour être transmis aux clients souhaitant envoyer des données cryptées au serveur avec la clé publique du serveur web fournie 
		dans le certificat. La clé privée au format .key restant côté serveur pour déchiffrer les données clients. Le fichier \verb-ssl_config.txt- 
		présente la configuration utilisée.
		
	
	\newpage
	\section{Client}
	Cette partie décrit l'application du côté client.
	
		\subsection{API - The Gadget}
		L'API (Mashup) utilisée est celle de GoogleMaps. Aussi on a commencé à intégrer une deuxième API pour le paiement 
		sécurisé par PayPal mais on a pas pu continuer du faites que l'API demande un nom de domaine valide du site web pour notifier un paiement réussi
		d'un client.
	
		\subsection{Javascript}
		L'application coté client a été developée avec JavaSript en utilisant la majorité des techniques offertes par Javascript.
		
		\subsubsection{Prototype Chain}
		Le Prototype Chain est une propriété des langages objets à prototype, et permet en autre l'héritage des méthodes dans un langage
		où il y a pas de classes. Ce type d'héritage est appelé héritage par délégation.\\
		Par exemple dans le fichier \verb-traveler.js- à la ligne \verb-190- on crée un nouveau objet \verb-xhr-, et dans la ligne d'aprés on fait appelle à la méthode \verb-open- 
		qui n'est pas définie dans cet objet mais si on remonte la chaîne de prototypes on trouve que la méthode est définie dans l'objet \verb-XMLHttpRequest-.
		
		\subsubsection{Scope Chain}
		Le 'Scop Chain' ou l'enchainement des environnements est une propriété des langages fonctionnels. Un environnement est une liste de couples 
		(variable, valeur). Lorsqu'une fonction est définie dans un environnement elle \emph{capture} cet environnement c'est à dire que les instructions
		locales de la fonctions seront exécuter dans l'environnement locale augumenté par celui qui a été capturé.\\
		Par exemple dans le fichier \verb-traveler.js- à la ligne \verb-145- la fonction \verb-initialize_map- utilise le chaînage d'environnement (Scope Chaining) pour accéder
		aux varaibles globales \verb-geocoder- et \verb-map-.
		
		\subsubsection{Recursion}
		Une fonction récursive est une fonction qui s'appelle elle même, c'est à dire dans le code de la fonction il y a une ou plusieurs instructions
		qui font un appel à cette fonction. Il ya deux types de récursions terminale et non terminale. Une récursion terminale une fois que le dernier appel
		retourne la valeur on fait monter directement cette valeur sans modifications jusqu'arriver au premier appel de la fonction. Au contraire une
		récursion non terminale implique des calculs sur la valeur retourné à chaque retour d'un appel récursif.
		Le problème avec les fonctions récursives s'est qu'il occuppe trop la pile (stack) et présente le risque de débordement de pile
		(stack overflow) et en général on utilise des mécanismes de dérécursification pour obtenir une version itérative de la même fonction.\\
		
		\subsubsection{'this' usage}
		l'utilisation du mot clé $this$ en JavaScript est un peu trompeuse. $this$ dans une fonction représente l'objet actuel qui est en train d'être crée
		par un appel de cette fonction, et pas l'objet qui éxécute la fonction si on appelle la fonction aprés un \verb-new-, et dans les autres cas, joue le même rôle que
		dans les langages orientés objets à classes. Par exemple dans le fichier \verb-traveler.js- à la ligne \verb-160- 
		on utilise le mot clé \verb-this- pour référencer l'objet courrant qui éxécute la méthode. Pour l'utilisation exotique de \verb-this-, c'est à dire
		où \verb-this- ne représente pas l'objet qui éxécute la méthode mais l'objet qui est créé lorsque l'appel est précédé par \verb-new-, dans notre
		code on ne crée que des objets définis dans le code de GoogleMap et donc on a pas ce cas d'utilisation.
		
		\subsubsection{Manipulation of the DOM}
		L'Arbre DOM est la représentation en mémoire du contenu d'une page HTML, ou d'un code XML en général. La manipulation de l'arbre DOM par Javascript
		permet d'effectuer des modifications directes sur le contenu de la page HTML dynamiquement.\\
		Dans notre code on manipule l'arbre DOM presque pour toute les opérations. Par exemple dans le fichier \verb-travel.js- à la ligne \verb-95- la fonction
		\verb-summarize()- modifie l'arbre DOM pour ajouter un nouveau service à la liste des services séléctionnés par le client.

	
\end{document}

